<template>
  <div>
    <div>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        @submit.native.prevent
      >
        <el-form-item label="商品名称">
          <el-input placeholder="输入商品名称:模糊查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-button type="success" @click="addGoods = true">添加商品</el-button>
      </el-form>
    </div>
    <!-- 分割线 -->
    <el-divider content-position="left"> </el-divider>
    <el-table :data="phonesData.arr" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.goods_name }}</span>
            </el-form-item>

            <el-form-item label="商品ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>

            <el-form-item label="商品价格">
              <span>{{ props.row.goods_price }}</span>
            </el-form-item>

            <el-form-item label="商品描述">
              <span>11</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="商品图片" width="180">
        <template slot-scope="scope">
          <img
            :src="`http://localhost:3000/${scope.row.goods_ico}`"
            width="50px"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="goods_name" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="goods_price" label="商品价格"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="getId(scope.row.id)"
            >修改</el-button
          >
          <el-button @click="delItem(scope.row.id)" type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加商品" :visible.sync="addGoods">
      <el-form ref="forms" :model="forms" :rules="rules1">
        <el-form-item
          label="商品品牌"
          prop="option"
          :label-width="formLabelWidth"
        >
          <el-select
            @change="change($event)"
            v-model="forms.aid"
            @click.native="submit"
            placeholder="请选择品牌"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.emps_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="goods_name"
          label="商品名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="forms.goods_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="goods_price"
          label="商品价格"
          :label-width="formLabelWidth"
        >
          <el-input v-model="forms.goods_price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addGoods = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改商品" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item
          prop="goods_name"
          label="商品名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.goods_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="goods_price"
          label="商品价格"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.goods_price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="xiugai">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next,total"
      :current-page="phonesData.page"
      :page-size="phonesData.pagesize"
      :total="phonesData.total"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addGoods: false,

      dialogFormVisible: false,
      formLabelWidth: '120px',
      options: '',

      aid: '',
      imageUrl: '',
      dialogFormVisible: false,
      forms: { aid: '', goods_name: '', goods_price: '' },
      form: {
        id: '',
        goods_name: '',
        goods_price: '',
        goods_cover: '',
      },
      formLabelWidth: '120px',
      phonesData: {
        arr: '',
        page: 1,
        pagesize: 5,
        total: 0,
      },

      rules: {
        goods_name: [{ required: true, message: '必填', trigger: 'blur' }],
        goods_price: [
          {
            required: true,
            message: '必填',
            trigger: 'blur',
          },
        ],
      },
      rules1: {
        option: [{ message: '必选', trigger: 'blur' }],
        goods_name: [
          {
            required: true,
            message: '必填',
            trigger: 'blur',
          },
        ],
        goods_price: [
          {
            required: true,
            message: '必填',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    pageChange(page) {
      console.log(page)
      let params = { page, pagesize: 5 }
      this.$http.goodsApi.getClassAll(params).then(res => {
        console.log('所有手机', res)
        this.phonesData.arr = res.data.data
        this.phonesData.total = res.data.total
      })
    },
    onsubmit() {
      let params = {
        emps_id: this.forms.aid,
        goods_name: this.forms.goods_name,
        goods_price: this.forms.goods_price,
      }
      console.log(params)
      this.$refs['forms'].validate(valid => {
        if (valid) {
          this.$http.goodsApi.addGood(params).then(res => {
            console.log(res)
            this.addGoods = false
            this.forms.aid = ''

            this.forms.goods_name = ''
            this.forms.goods_price = ''
            this.c()
            if (res.data.code == 200) {
              this.$message({
                message: '添加商品成功',
                type: 'success',
              })
            } else {
              this.$message.error('添加商品失败')
            }
          })
        }
      })
    },

    change(e) {
      // 通过打印查看是否能拿到对应值
      console.log('aid', e)
      this.aid = e
    },
    submit() {
      let params = 4
      this.$http.goodsApi.getSortTwo(params).then(res => {
        console.log('商品品牌', res)
        this.options = res.data.data
        console.log(this.options)
      })
    },

    getId(id) {
      console.log('id', id)
      this.dialogFormVisible = true
      this.mid = id
    },
    xiugai() {
      let params = {
        id: this.mid,
        goods_name: this.form.goods_name,
        goods_price: this.form.goods_price,
      }
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log('接收到的参数', params)
          this.$http.goodsApi.getRmGood(params).then(res => {
            console.log('返回结果', res)
            this.dialogFormVisible = false
            this.c()
            this.$message({ type: 'success', message: '修改成功!' })
            this.form.name = ''
            this.form.price = ''
          })
        }
      })
    },

    c() {
      let params = {
        page: 1,
        pagesize: 5,
      }
      console.log(params)

      this.$http.goodsApi.getClassAll4(params).then(res => {
        console.log('所有手机', res)
        this.phonesData.arr = res.data.data
        this.phonesData.total = res.data.total
      })
    },
    delItem(id) {
      console.log('待删除的商品' + id)
      this.$confirm('该操作将永久删除商品，是否继续？', '提示', {
        type: 'warning',
      }).then(() => {
        // 确认删除
        console.log(id)
        this.$http.goodsApi.delGood(id).then(res => {
          this.$message({ type: 'success', message: '删除成功' })

          if (res.data.code == 200) {
            console.log('aaaaa', res.data.code)
            this.c()
          }
        })
      })
    },
  },

  mounted() {
    this.c()
  },
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
